<!doctype html>
<html>
	<head>
		<title>Statistics</title>
                <script src="qrc:/html/Chart.js"></script>
                <script src="qrc:/html/utils.js"></script>
	</head>
	<body>
            <div style="width: 100%; overflow: hidden;">
                <div id="canvas-holder" style="width:40%; float: left;">
                        <canvas id="canvas" width="230" height="230"/>
                </div>
                <div id="canvas-holder" style="width:40%; margin-left: 500px;">
                        <canvas id="canvas2" width="230" height="230"/>
                </div>
            </div>
	<script>
        var chartColors = window.chartColors;
        var color = Chart.helpers.color;
        var lineChartData = {
                    type: 'radar',
                    data: {
                        labels : ["Functions","Imports","Symbols","Strings","Relocs", "Sections"],
                        datasets : [
                            {
                                label: "Amount",
                                backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
                                borderColor: window.chartColors.blue,
                                pointBackgroundColor: window.chartColors.blue,
                                data : [MEOW]
                            }
                        ]
                    },
                    options: {
                        legend: {
                            display: false,
                        },
                        title: {
                            display: false,
                            text: 'Binary statistics'
                        },
                        tooltips: {
                            mode: 'index',
                            intersect: false,
                            displayColors: false,
                        },
                        scale: {
                          ticks: {
                            beginAtZero: true
                          }
                        }
                    }
        };

        var config = {
            data: {
                datasets: [{
                    data: [WOEM],
                    backgroundColor: [
                        color(chartColors.red).alpha(0.5).rgbString(),
                        color(chartColors.blue).alpha(0.5).rgbString(),
                        color(chartColors.yellow).alpha(0.5).rgbString(),
                        color(chartColors.green).alpha(0.5).rgbString(),
                        color(chartColors.purple).alpha(0.5).rgbString(),
                        color(chartColors.grey).alpha(0.5).rgbString(),
                    ]
                }],
                labels : ["Functions","Imports","Symbols","Strings","Relocs", "Sections"]
            },
            options: {
                responsive: true,
                legend: {
                    display: false
                },
                title: {
                    display: false,
                    text: 'Chart.js Polar Area Chart'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                    displayColors: false,
                },
                scale: {
                  ticks: {
                    beginAtZero: true
                  },
                  reverse: false
                },
                animation: {
                    duration: 0,
                    animateRotate: false,
                    animateScale: true
                }
            }
        };



	window.onload = function(){
            var ctx = document.getElementById("canvas");
            window.myLine = new Chart(ctx, lineChartData);
            var ctx2 = document.getElementById("canvas2");
            window.myPolarArea2= Chart.PolarArea(ctx2, config);
	}

	</script>
	</body>
</html>
